<template>
    <div>
        <el-dialog :title="isedit ? '修改商品管理' : '添加商品管理'" :visible.sync="isshow" center :before-close="esc">
            <el-form :model="form" :rules="rules" ref="formName">
                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="活动期限" :label-width="formLabelWidth1">
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <!-- 一级分类 -->
                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select @change="aaa" v-model="form.first_cateid" placeholder="请选择一级分类">
                        <el-option v-for="item in getlist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 二级分类 -->
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select @change="shop" v-model="form.second_cateid" placeholder="请选择二级分类">
                        <el-option v-for="item in cha" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="form.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in goods" :key="item.id" :label="item.goodsname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="esc">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { seckadd, seckedit, seckinfo, goodslist } from '../../request/app'

export default {
    props: ['isshow', 'isedit'],
    data() {
        return {
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            gettype: 1,
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            // isshow:true,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                title: '',
                begintime: '',
                endtime: "",
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1,//状态1正常2禁用

            },
            rules: {

                title: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                ],

            },
            formLabelWidth: '120px',
            formLabelWidth1: '120px',
            cha: [],
            bbbc: [],
            goods: [],
            //设置一个编辑器的值
            edit: null

        };
    },
    computed: {
        ...mapGetters({
            getlist: 'toshop/getlist',
            specslist: 'tospecs/getlist',
            getgoodslist: 'setgoods/getlist',
        }),

    },
    mounted() {
        // console.log(this.$img);
        this.ACspecslist()
        this.ACsetlist()
    },
    methods: {
        //封装一个实例化富文本编辑器的方法

        ...mapActions({
            ACsetlist: 'toshop/ACsetlist',
            ACspecslist: 'tospecs/ACsetlist',
            ACgetlist: 'setgoods/ACgetlist',
            ACgetpage: 'setgoods/ACgetpage',
            ACsecksetlist: 'setseck/ACgetlist',
        }),
        // 关闭弹框
        esc() {
            // console.log(e);
            this.$emit('isshow', false)
            this.resize()
        },
        // 获取一级分类的id
        aaa(e) {
            this.form.second_cateid = '',
                this.form.goodsid = '',
                this.getlist.map(item => {
                    if (item.id == e) {
                        this.cha = item.children
                    }
                }
                );
            // console.log(this.cha);
        },
        bbb(e) {
            // console.log(e);
            // console.log(this.specslist);
            this.specslist.map(item => {
                if (item.id == e) {
                    this.bbbc = item.attrs
                }
            })
            // console.log(this.bbb);
        },
        shop() {
            this.form.goodsid = '',
                goodslist({
                    fid: this.form.first_cateid,
                    sid: this.form.second_cateid
                }).then(res => {
                    console.log(res);
                    this.goods = res.list
                })
        },

        sure(e) {
            // console.log(e);
            // console.log(this.value1);
            this.form.begintime = this.value1[0].getTime()
            this.form.endtime = this.value1[1].getTime()
            // console.log(this.form);
            this.$refs.formName.validate((e) => {
                if (e) {
                    if (this.isedit) {
                        // 修改事件
                        // console.log(1111111111, 'edit');
                        seckedit(this.form)
                            .then(res => {
                                // console.log(res);
                                this.esc()
                                this.ACsecksetlist()
                        })

                        console.log(this.getlist);

                    } else {
                        // 添加事件

                        seckadd(this.form)
                            .then(res => {
                                // console.log(res);
                                this.esc()
                                this.ACsecksetlist()

                            })
                    }
                }
            })

        },
        // 重置
        resize() {
            this.form = {
                title: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: '',
                status: 1,//状态1正常2禁用
            },
                this.$refs.formName.resetFields();
        },
        // 修改的打开对话框
        lookup(id) {
            // 数据回显

            seckinfo({
                id
            })
                .then(res => {
                    console.log(res, '回显');
                    this.form = res.list
                    // console.log(this.form.first_cateid);
                    // console.log(this.getlist);
                    let a = this.getlist.findIndex(item => item.id == this.form.first_cateid)
                    // console.log(a);
                    this.cha = this.getlist[a].children
                    this.form.id = id
                    goodslist({
                        fid: this.form.first_cateid,
                        sid: this.form.second_cateid
                    }).then(res => {
                        console.log(res);
                        this.goods = res.list
                    })

                    // console.log(this.form,'回显');
                })
        },

    },
    components: {
    },
}
</script>

<style scoped>
.el-date-editor--datetimerange.el-input__inner {
    width: 380px;
}
</style>
